<template>
    <div class="wrap">
        <el-header title="篱笆闲聊" :isBack="false"></el-header>
        <main>
            <ul>
                <el-list v-for="(item,index) in list" :key="index" 
                    :username="item.username"
                    :con="item.con"
                    :title="item.title"
                    :time="item.time"
                ></el-list>
            </ul>
            <button @click="open">open</button>
        </main>
        <el-dialog v-show="show"></el-dialog>
    </div>
</template>
<script>
import ElHeader from '@/elHeader'
import ElDialog from '@/elDialog'
import ElList from '@/elList'
import axios from 'axios'

export default {
    components:{
        ElHeader,
        ElDialog,
        ElList
    },
    data(){
        return {
            show:false,
            list:[]
        }
    },
    methods:{
        open(){
            this.show = true;
        },
        getData(){
            axios.get('/api/list').then((res) => {
                if(res.data.code === 1){
                    this.list = res.data.data;
                }
            })
        }
    },
    created(){
        this.getData();
        this.bus.$on('closeDialog',() => {
            this.show = false;
            this.getData();
        });
    }
}
</script>
<style>
*{
    margin:0;
    padding:0;
    box-sizing: border-box
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}

.wrap{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

</style>

